<!--
 * @Description: 微任务页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-06-08 23:24:26
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-09 22:13:47
--> 
<template>
  <div class="task_body">
    <div class="task_tab">
       <el-tabs v-model="taskstatus">
        <el-tab-pane label="进行中" name="ongoing">
          <el-table v-if="taskData.ongoing.length !== 0"
            :data="taskData.ongoing"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="任务id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="task_name"
              label="任务名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="content"
              label="任务内容">
            </el-table-column>
            <el-table-column label="状态" width="180">
              <template slot-scope="scope">
                <span class="examine" v-if="scope.row.status === 2" style="color:#d69309;">待审核</span>
                <span class="examine" v-else-if="scope.row.status === 0" style="color:#000000;">未提交</span>
                <span class="examine" style="color:#ff0000;" v-else>未通过</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="examine" v-if="scope.row.status !== 0" @click="examineTask(scope.row.id, scope.row.completion_data)">查看并审核</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-else class="empty-content">暂时没有进行中任务</div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="finished">
          <el-table v-if="taskData.finished.length !== 0"
            :data="taskData.finished"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="任务id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="task_name"
              label="任务名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="content"
              label="任务内容">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="examine" v-if="scope.row.status !== 0" @click="examineTask(scope.row.id, scope.row.completion_data, true)">查看</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-else class="empty-content">暂时没有已完成任务</div>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <el-dialog :visible.sync="taskDetailShow" title="任务详情" width="600px">
      <div class="taskdetail">
        <p class="detail-title">心得体会:</p>
        <p class="detail-text" v-if="completionData.desc !== ''">{{ completionData.desc }}</p>
        <p class="detail-text" v-else>无</p>
        <p class="detail-title">用户上传图片:</p>
        <p class="detail-text">
          <span v-for="(item, index) in completionData.images" :key="index" :style="{backgroundImage:'url('+ item +')'}"  @click="showBigImg(item)">
           <!-- <img :src="item" alt=""> -->
          </span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!isSee" type="primary" @click="examineSubmit('yes')">审核通过</el-button>
        <el-button v-if="!isSee" type="primary" @click="examineSubmit('no')" style="background: #ff0000;
    border: #ff0000;">不通过</el-button>
        <el-button type="primary" @click="cancelTask()" style="background: #e1b544;
    border: #e1b544;">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="营养师评价" :visible.sync="commentShow" width="500px">
      <div class="taskdetail">
        <el-input v-model="comment" type="textarea" rows="5" placeholder="请输入评价" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="subComment()">确定</el-button>
      </span>
    </el-dialog>
    <div class="big-img" v-if="showbigimg" @click="closeBigImg()">
      <img :src="thisimg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      serviceId: '',
      taskstatus: 'ongoing',
      taskData: {
        ongoing: [],
        finished: []
      },
      taskDetailShow: false,
      completionData: {},
      taskid: '',
      thisimg: '',
      commentShow: false,
      showbigimg: false,
      comment: '',
      isSee: false
    }
  },
  methods: {
    initData(serviceId) {
      this.serviceId = serviceId
      this.getTaskList()
    },
    getTaskList() {
      this.$api.order.service
        .getServiceMicro(this.serviceId)
        .then(res => {
          this.taskData = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    examineTask(id, comdata, isSee = false) {
      this.taskid = id
      this.completionData = comdata
      this.taskDetailShow = true
      this.isSee = isSee
    },
    cancelTask() {
      this.taskDetailShow = false
    },
    showBigImg(img) {
      this.thisimg = img
      this.showbigimg = true
    },
    closeBigImg () {
      this.showbigimg = false
      this.thisimg = ''
    },
    examineSubmit (status) {
      if (status === 'yes') {
        this.$confirm('确认通过该任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.examine(1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核'
          })
        })
        console.log('通过')
      } else {
        this.commentShow = true
      }
    },
    subComment() {
      if (this.comment === '') {
        this.$notify({ title: '警告', message: '请填写未通过评价', type: 'error', duration: 1500 })
        return false
      }
      this.$confirm('确认不通过该任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.order.service
            .changeMicroStatus({
              data: { id: this.taskid, status: 3, comment: this.comment }
            }).then(res => {
              this.taskDetailShow = false
              this.commentShow = false
              this.getTaskList()
            }).catch(err => {
              console.log(err)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核'
          })
        })
    },
    examine(status) {
      this.$api.order.service
        .changeMicroStatus({
          data: { id: this.taskid, status: status, comment: '' }
        }).then(res => {
          this.taskDetailShow = false
          this.getTaskList()
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>
  .examine{
    color:#20a0ff;
    cursor: pointer;
  }
.detail-text span{
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
  }
  .detail-title{
    font-weight: bold;
    color: #000000;
    margin: 10px 0;
    font-size: 18px;
  }
  .big-img{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.51);
    top: 0;
    text-align: center;
    left: 0;
    z-index: 9999;
    overflow-y: scroll;
  }
  .big-img img{
    width: 800px;
    margin-top: 100px;
  }
</style>
